<html>
<head>
    <title>SIMILE | Timeline | Documentation | Basics</title>
    <link rel='stylesheet' href='styles.css' type='text/css' />
    <script src="../api/timeline-api.js" type="text/javascript"></script>
    <script>
        var tl1, tl2;
        function onLoad() {
            var bandInfos1 = [
                Timeline.createBandInfo({
                    width:          "70%", 
                    intervalUnit:   Timeline.DateTime.MONTH, 
                    intervalPixels: 50
                }),
                Timeline.createBandInfo({
                    width:          "30%", 
                    intervalUnit:   Timeline.DateTime.YEAR, 
                    intervalPixels: 70
                })
            ];
            bandInfos1[1].syncWith = 0;
            bandInfos1[1].highlight = true;
            tl1 = Timeline.create(document.getElementById("tl1"), bandInfos1, 
                Timeline.HORIZONTAL);
                
            var bandInfos2 = [
                Timeline.createBandInfo({
                    width:          "70%", 
                    intervalUnit:   Timeline.DateTime.DAY, 
                    intervalPixels: 50
                }),
                Timeline.createBandInfo({
                    width:          "30%", 
                    intervalUnit:   Timeline.DateTime.WEEK, 
                    intervalPixels: 70
                })
            ];
            bandInfos2[1].syncWith = 0;
            bandInfos2[1].highlight = true;
            tl2 = Timeline.create(document.getElementById("tl2"), bandInfos2, 
                Timeline.VERTICAL);
        }
    </script>
</head>
<body onload="onLoad();">
<ul id="path">
  <li><a href="http://simile.mit.edu/" title="Home">SIMILE</a></li>
  <li><a href="../" title="Timeline">Timeline</a></li>
  <li><a href="./" title="Documentation">Documentation</a></li>
  <li><span>Basics</span></li>
</ul>

<div id="body">
    <div style="float: right; margin-left: 1em; margin-bottom: 1em;">
        <table>
            <tr>
                <td><div id="tl1" class="timeline-default" style="width: 250px; height: 200px;"></div></td>
                <td><div id="tl2" class="timeline-default" style="width: 250px; height: 200px;"></div></td>
            </tr>
        </table>
    </div>
    
    <h1>Timeline Basics</h1>
    
    <p>A timeline (live samples at right) contains one or more 
        <a href="bands.html"><em>bands</em></a>,
        which can be panned infinitely by dragging with the mouse 
        pointer. A band can be configured to synchronize with another 
        band such that panning one band also scrolls the other.
    </p>
    
    <p style="clear: both">
        <img src="images/timeline.jpg" style="float: right; margin: 1em;" />
        A timeline is implemented as a <span class="html">div</span>
        element that contains inner <span class="html">div</span>
        elements as its bands (right). The band <span class="html">div</span>s
        are cropped and positioned relative to the timeline
        <span class="html">div</span>.
    </p>
    
    <p>A band <span class="html">div</span> itself contains several
        inner elements that implements various parts of the band.
        For example, the two timelines above show labels for days,
        weeks, months, and years. The bands also have different
        background colors, and the weekly band of the second timeline
        has weekend markings. All of these visual elements are "painted"
        by adding HTML elements to the band <span class="html">div</span>s
        at the appropriate positions.
    </p>
    
    <p>As a band is panned, its <span class="html">div</span> is 
        shifted horizontally or vertically, carrying all of its visual 
        elements along. When either end of the band 
        <span class="html">div</span> approaches the visible (non-cropped) 
        area, the band <span class="html">div</span> is re-centered,
        its coordinate origin is changed, and then its various
        visual elements are re-"painted" relative to the new coordinate
        origin. All of this "paging" is done as seamlessly as possible so 
        that the user experiences smooth, <em>infinite</em> panning.
    </p>
    
    <p>A band is responsible for supporting panning as well as coordinating its
        various sub-components:
        <ul>
            <li>an <a href="ethers.html"><em>ether</em></a>, whose sole responsibility 
                is mapping between pixel coordinates and dates/times;
            </li>
            <li>an <a href="ether-painters.html"><em>ether painter</em></a>, which 
                paints date/time labels and the background of the band as well as 
                the highlight (the lighter part of the lower band in the first 
                timeline above);
            </li>
            <li>zero or more <a href="decorators.html"><em>decorators</em></a>, which 
                further decorate the background of the band; and
            </li>
            <li>an <a href="event-painters.html"><em>event painter</em></a>, which 
                paints the events.
            </li>
        </ul>
        The band also takes an <a href="event-sources.html"><em>event source</em></a>
        which provides events to be displayed in that band. Different bands can have 
        different event sources. This flexibility allows for <em>timeline mashups</em>,
        as exemplified <a href="../examples/religions/religions.html">here</a>.
        Various sub-components that do painting take a 
        <a href="themes.html"><em>theme</em></a>, which stores default visual and
        behavioral settings.
    </p>
    
    <p>&nbsp;</p>
    
    <h2>Related Topics</h2>
    <ul>
        <li><a href="create-timelines.html">How to create timelines</a></li>
        <li><a href="timelines.html">Timeline class</a></li>
    </ul>
</div>
</body>
</html>